@use 'sass:math'

@mixin overlay
  background: rgba(0,0,0,.8)
  backdrop-filter: blur(10px)
  box-shadow: 0 0 10px rgba(0,0,0,.5)

video
  max-height: 50vh
  width: 100%
  height: 100%
  margin: 0 auto

.videoPlayer
  flex: 1
  background: #000
  display: flex
  align-items: stretch
  flex-direction: column
  justify-content: center
  font-size: 0
  position: relative
  user-select: none
  border-left: 1px solid var(--border)

  &:has(.timecodeMarker:hover)
    .videoCaption
      opacity: 0

  > div:first-child
    display: flex
    flex: 1

.emptyVideo
  height: 50vh
  color: #fff
  display: flex
  align-items: center
  justify-content: center
  font-size: 16px

  p
    max-width: 500px
    text-align: center

    span
      display: inline-block
      rotate: -45deg

.videoCaption
  @include overlay
  position: absolute
  bottom: 80px
  text-align: center
  padding: 10px
  color: #fff
  max-width: 720px
  font-size: 15px
  margin-inline: 30px
  left: 50%
  translate: -50% 0
  width: -webkit-fill-available
  border-radius: 5px
  transition: opacity .2s

.videoControls
  font-size: 12px
  position: relative
  background: var(--background)

  &:hover
    .videoScrubber, .timecodeMarkerTick
      scale: 1 2.3

$scrubberHeight: 5px

.videoScrubber
  height: $scrubberHeight
  transform-origin: bottom
  transition: all .2s
  overflow: hidden

  input
    position: relative
    top: -8px
    height: 5px
    appearance: none
    width: 100%
    background-image: linear-gradient(to right, var(--track-fill) 0%, var(--track-fill) var(--pct), var(--track) var(--pct), var(--track) 100%)

    &::-webkit-slider-thumb
      opacity: 0

.videoTime
  display: flex
  justify-content: space-between
  align-items: center
  padding: 15px
  font-size: 15px
  border-top: 1px solid var(--border)

  button
    font-size: 20px

.timecodeList
  overflow: auto
  padding: 10px 20px

  td
    padding: 10px 5px

  button
    color: var(--link)

    &:hover
      color: var(--link)

.timecodeMarkers
  position: absolute
  inset: 0
  pointer-events: none

$timecodeW: 10px
$markerW: 3px

.timecodeMarker
  position: absolute
  top: 0
  width: $timecodeW
  background: rgba(0,0,0,.01)
  translate: -(math.round(math.div($timecodeW - $markerW, 2))) 0

  &:hover
    .timecodeMarkerLabel
      opacity: 1

.timecodeMarkerTick
  height: $scrubberHeight
  pointer-events: auto
  cursor: pointer
  transform-origin: bottom
  transition: all .2s
  background: rgba(0,0,0,.01)
  overflow: hidden

  > div
    width: $markerW
    height: 100%
    background: var(--link)
    translate: 3px 0

.timecodeMarkerLabel
  @include overlay
  opacity: 0
  display: flex
  flex-direction: column
  gap: 5px
  font-size: 11px
  transition: opacity .1s
  pointer-events: none
  position: absolute
  top: 0
  translate: 0 calc(-100% - 15px)
  z-index: 99
  padding: 8px
  border-radius: 5px
  width: max-content
  max-width: 200px
  color: var(--mid)

  &.right
    right: 0

  p
    color: var(--text)
    font-size: 13px
